import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
    message
} from 'antd'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useSearchParams } from 'react-router-dom'
import './index.scss'
import { changeArticleById, createArticleApi, getArticleById, getChannelApi } from '@/apis/article'
import { useEffect, useState } from 'react'
import { useChannel } from '@/hooks/useChannel'
import { useForm } from 'antd/es/form/Form'

const { Option } = Select

const Publish = () => {

    const { channels } = useChannel()



    const onFinish = (FormValue) => {

        if (imageList.length != imageType) {

            return message.warning('封面数量和数量不匹配')
        }

        console.log(FormValue);
        // console.log(reqData.cover.images);
        // 按着接口文档的格式进行处理收集到的表单数据
        // 调用接口
        const { title, channel_id, content } = FormValue
        const reqData = {
            title,
            content,
            cover: {
                type: imageType,
                // 这里的处理逻辑不够用了
                images: imageList.map(item => {
                    if (item.response) {
                        return item.response.data.url

                    } else {

                        return item.url
                    }

                })

            },
            channel_id
        }
        // 处理一下接口
        // 这是新增接口
        if (articleID) {

            changeArticleById({
                ...reqData, id: articleID
             })

        } else {
            createArticleApi(reqData)

        }
    }

    const [imageList, setImageList] = useState([])

    const onChange = (value) => {
        console.log('正在上传。。。。。。。。', value);
        // console.log(value);
        setImageList(value.fileList)
        console.log(imageList);
    }


    const [imageType, setImageType] = useState(0)
    const onTypeChange = (e) => {

        console.log('切换了', e.target.value);
        setImageType(e.target.value)
    }

    // 当文章页面点击修改，跳转到这个页面，携带ID，当整个页面渲染完就该出现，于是使用useEffect
    const [searchParams] = useSearchParams()
    const articleID = searchParams.get('id')
    console.log(articleID);
    const [form] = Form.useForm()
    useEffect(() => {
        async function getArticleDetail() {
            const res = await getArticleById(articleID)
            console.log(res);
            const { cover, ...formValue } = res.data
            form.setFieldsValue({ ...formValue, type: cover.type })

            setImageType(res.data.cover.type)
            setImageList(res.data.cover.images.map(url => {
                return { url }
            }))
        }
        if (articleID) {
            // 拉取数据回显
            getArticleDetail()

        }

    }, [articleID, form])

    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: `${articleID ? '编辑' : '新增文章'}` },
                    ]}
                    />
                }
            >
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ type: 1 }}
                    onFinish={onFinish}
                    form={form}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{ required: true, message: '请输入文章标题' }]}
                    >
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{ required: true, message: '请选择文章频道' }]}
                    >
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {channels.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                        </Select>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {imageType > 0 && <Upload
                            // listType="picture-card" 决定文件框的外观样式
                            // showUploadList 控制显示上传列表
                            name='image'
                            listType="picture-card"
                            showUploadList
                            action={'http://geek.itheima.net/v1_0/upload'}
                            onChange={onChange}
                            maxCount={imageType}
                            fileList={imageList}

                        >    <div style={{ marginTop: 8 }}>
                                <PlusOutlined />
                            </div>
                        </Upload>}


                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{ required: true, message: '请输入文章内容' }]}
                    >
                        <ReactQuill
                            className="publish-quill"
                            theme="snow"
                            placeholder="请输入文章内容"
                        />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit" >
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish